
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/zhichu">生成支出</router-link></div>
          --><div class="hei10"></div>
                <div class="powertop">
                <router-link class="powertopli powertopact" to="/finance/zhichu">佣金支出</router-link>
                <router-link class="powertopli " to="/finance/zhichu/tkzhichu" >提卡费支出</router-link>
            </div>
                <div class="conlist" v-loading='loading'>
                    <div class="flex tktiao" style=" margin: 0 20px 20px;  width: 1166px;">
                        <div class="tkli tkact" @click="goto('zhichu')">佣金支出核算</div>
                        <div class="tkli" @click="goto('zhichu/querenzhichu')" >佣金支出确认</div>
                        <div class="tkli " @click="goto('zhichu/dakuan')">财务打款</div>
                    </div>
                    <div class="flex">

                        <div class="gong moneyf">
                            <el-form ref="form" @submit.native.prevent :model="form" label-width="80px" class="form">

                                <el-form-item label="分销商:">
                                    <el-input v-model="name" placeholder="请输入分销商名称"></el-input>
                                </el-form-item>
                                <el-form-item label="时间:">
                                    <el-date-picker style="width: 400px;"  v-model="update_time"  @change="fixtime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetimerange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                </el-form-item>
                                <el-button type="danger" @click="search">搜索</el-button>
                            </el-form>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="gong moneyf">
                            <!-- <el-button size="small" type="primary" @click="shengchengzhichu">生成支出数据</el-button> -->
                            <el-button size="small" type="primary" style="margin-right: 20px;" @click="shengchengzhichu">批量生成支出</el-button>
                            <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup"  style="margin-right: 20px;">
                              <el-button size="small" type="primary">按导入数据发放佣金</el-button>
                            </el-upload>
                            <span @click="downmoban" style="margin-right: 20px; padding-top: 7px; color: #409EFF; cursor: pointer;">模板下载</span>
                        </div>
                        <div class="gong gl">
							<div style="line-height: 36px; color: #EEF7FF; margin-right: 30px; font-weight: bold;"><span style="margin-right: 20px;" v-if="danxuans.length">已勾选：{{danxuans.length}}条数据</span>勾选总金额：{{zong}}元</div>

                            <router-link to="/finance/zhichu/zhichunew"><el-button size="small" type="primary">全量佣金数据校验>></el-button></router-link>
                        </div>
                    </div>
                    <div class="list" >
                        <div class="th"><input type="checkbox" @change="quanxuan" value="0" v-model="quanxuana" />全选</div>
                        <div class="th">分销商</div>
                        <div class="th">待核算订单</div>
                        <div class="th">待核算金额</div>
                        <div class="th">提卡费欠费</div>
                        <div class="th">最近一次佣金生成时间</div>
                        <div class="th">佣金状态</div>
                        <div class="th td2">操作</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">
                        <div class="td"><input type="checkbox" :value="item.user_id" @change="danxuan" v-model="danxuans" /></div>
                        <div class="td">{{item.shop_name}}</div>
                        <div class="td">{{item.count}}</div>
                        <div class="td">{{item.sum_amount | qux}}</div>
                        <div class="td">{{item.tika_cost}}</div>

                        <div class="td">{{item.created_at}}</div>
                        <div class="td">待生成支出数据</div>
                       <div class="td td2">
                            <el-button type="text" @click="shujumingxi(item.shop_name,item.tid)">数据明细</el-button>
                            <el-button type="text" @click="shengchengzhichudan(item.user_id,item.sum_amount,item.tika_cost)">生成支出数据</el-button>
                        </div>
                    </div>
                    <!-- <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination> -->
                </div>
            </div>
        </div>
        <el-dialog :title="choose.mobile" :visible.sync="tongjilog" width="400px" :close-on-click-modal='false'>
            <div class="daowei">所属商品编码:<span class="daowei2">{{choose.good_sku}}</span></div>
            <div class="daowei">返利次数:<span class="daowei2">{{choose.cycle}}</span></div>
            <div class="daowei">已领取次数:<span class="daowei2">{{choose.rebate_cycle}}</span></div>
            <div class="daowei">已领取积分:<span class="daowei2">{{choose.points}}</span></div>
            <div class="daowei">已充值话费:<span class="daowei2">{{choose.recharged_amount}}</span></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tongjilog = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="导入线下收入明细" :visible.sync="daorulog" :close-on-click-modal="false" width="600px">
              <div>
                  <el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="支出名称:">
                          <el-input v-model="shouruname"></el-input>
                      </el-form-item>
                      <el-form-item label="上传表格:">
                          <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup">
                            <el-button size="small" type="primary">导入线下结算佣金数据</el-button>
                          </el-upload>
                      </el-form-item>
                  </el-form>
              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="shoplog = false">数据效验</el-button>
                  <el-button type="primary" size="small"  @click="shoplog = false">跳到校验直接导入</el-button>
              </div>
        </el-dialog>

        <el-dialog title="导入结果" :visible.sync="shoplog" :close-on-click-modal="false" width="600px">
              <div>
                  <div style="color: #077ECE; line-height: 30px;">成功{{shoplist.success}}条</div>
                  <div style="color: #DF3434; line-height: 30px;">失败及原因：
                      <div v-for="(item,i) in shoplist.erros" :key="i">
                          {{item}}
                      </div>
                  </div>
              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="shoplog = false">好的</el-button>
              </div>
        </el-dialog>

        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import qu0 from '../../../public/qu0.js'
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import moment from "moment";
    import UploadExcelComponent from "@/components/UploadExcel/index.vue";
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            UploadExcelComponent

        },
        name: "zhichu",
        data() {
            return {
                danxuans: [],
                quanxuana: false,
                quanxuans: [],
                update_time:"",
                update_start:"",
                update_end:"",
                name:"",
                qrstatus:"2",
                qrmonth:"",
                form:{},
                monthfixlog:false,
                monthfix:"",
                monthfixall:{},
                wenjian:"",
                shoplog:false,
                shoplist:"",

                btnname:"点击导入",
                uploading:true,
                fanliuploadlog:false,
                uploadsuceess:"",
                uploadtimes:"",
                uploadmon1:"",
                uploadmon2:"",
                uploadmon3:"",
                uptime:"",
                month:"",
                monthsearch:"",
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:true,
                mobile:"",
                sku:"",
                tongjilog:false,
                choose:{ },
                url:"",
                id:"",
                func_J02:false,
                leader:0,
                daorulog:false,
                shouruname:"",
				zong:0,
        shop_id:"",
        shop_id2:""
            }
        },
        filters: {
            qux:function(dataStr){
                return qu0.qu0(dataStr)
            }
        },
        created() {
            this.url = window.location.origin+"/"

            //权限问题
            var user = JSON.parse(localStorage.getItem('USER'));
            this.user_func = user.functions
            for( var i in this.user_func){
                var func_number = this.user_func[i].code
                if(func_number.indexOf("J02") >= 0){ this.func_J02 = true }
                if(func_number.indexOf("J01") >= 0){ this.func_J01 = true }
                if(func_number.indexOf("J03") >= 0){ this.leader = 1 }
            }

            var shop = JSON.parse(localStorage.getItem('SHOP'));
            this.shopname = shop.shop_name
            var that = this

            // this.monthsearch = moment().format("YYYY-MM");
            // this.uploadmon1 = moment().subtract(1, 'months').format("YYYY-MM");
            // this.uptime = moment().format("YYYY-MM");
            // this.uploadmon2 = moment().format("YYYY-MM");
            // this.uploadmon3 = moment().add(1, 'months').format("YYYY-MM");

            // console.log(moment().format("YYYY-MM"))

            //获取店铺id
            axios.get("/api/gth/user/shop").then(response => {
              if (response.data.msg.code == 0) {
                this.shop_id2 = response.data.data.shop_id;
              } else {
                this.$message.error(response.data.msg.info);
              }
            });

            this.shop_id = JSON.parse(localStorage.getItem('USER')).id;
            this.getlist()

        },
        mounted() {

        },
        methods: {
          goto:function(url){
            this.$router.push('/finance/'+url)
          },
          shujumingxi:function(name,id){
              this.$router.push({
              	path: '/finance/zhichu/zhichunew',
              	query: { name:name,id:id }
              })
          },
          //修改时间
          fixtime:function(){
              if(this.update_time != null){
                this.update_start = this.update_time[0]
                this.update_end = this.update_time[1]
              }else{
                this.update_start = ''
                this.update_end = ''
              }

          },
            downmoban:function(){
              const a = document.createElement('a');
              a.setAttribute('download', '按导入数据发放佣金模板.xlsx');
              a.setAttribute('href', this.url+'91haoka_platform/static/daorushuju.xlsx');
              a.click();
            },
            upup:function(file){
              var that = this
              this.loading = true
              var params = new FormData();
              params.append('file',file.file);
              axios.post("/api/plan-market/income/confirm/import", params)
                      .then(function(response) {
                          if (response.data.msg.code == 0) {
                              that.shoplist = response.data.data
                              that.shoplog = true
                              that.loading = false
                          }else{
                              that.$message.error(response.data.msg.info);
                          }
                      })
            },
            //全选的ids集合
            ids: function() {
              var checkids = [];
              for (var i in this.list) {
                checkids.push(this.list[i].user_id);
              }
              this.quanxuans = checkids;
            },
            //点击全选
            quanxuan: function() {
              if (
                this.danxuans.length != this.quanxuans.length ||
                this.danxuans.length == 0
              ) {
                this.danxuans = this.quanxuans;

                this.quanxuana = true;
              } else {
                this.danxuans = [];
                this.quanxuana = false;
              }
			  this.zongqian()
            },
			zongqian:function(){
				this.zong = 0
				for(let i in this.list){
					for(let m in this.danxuans){
						console.log(this.danxuans[m],this.list[i].user_id)
						if(this.danxuans[m] == this.list[i].user_id){
              if(this.list[i].sum_amount == null){
                this.list[i].sum_amount = 0
              }
							this.zong = parseFloat(this.zong) + parseFloat(this.list[i].sum_amount)
						}
					}
				}
			},
            //点击单选
            danxuan: function() {
              // this.choosearea.push(this.checkedarea)
              if (this.danxuans.length == this.quanxuans.length) {
                this.quanxuana = true;
              } else {
                this.quanxuana = false;
              }
			  this.zongqian()
            },
            //批量确认支出
            querenzhichuall:function(){
              this.loading = true
              var that = this;
              axios.post('/api/plan-market/expends/confirm',{id:this.danxuans})
              	.then(response => {
              		if(response.data.msg.code == 0){
                    that.getlist()
              		}else{
              			if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
              			that.$message.error(response.data.msg.info);
              		}
              	})
            },
            //单个确认支出
            querenzhichu:function(id){
              this.loading = true
              var that = this;
              axios.post('/api/plan-market/expend/confirm',{id:id})
              	.then(response => {
              		if(response.data.msg.code == 0){
                    that.getlist()
              		}else{
              			if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
              			that.$message.error(response.data.msg.info);
              		}
              	})
            },

            shengchengzhichudan:function(id,sum_amount,tika_cost){
              var that = this
              if(tika_cost == '' || tika_cost == 0){

              }else{
                this.$confirm('是否自动扣除提卡费?', '提示', {
                  confirmButtonText: '扣除',
                  cancelButtonText: '不扣除',
                  type: 'warning',
                  closeOnClickModal:false,
                  distinguishCancelAndClose: true,
                }).then(() => {
                  if(tika_cost > sum_amount){
                    that.$message.error("提卡欠费多余佣金，不能扣除提卡费！");
                    return false
                  }
                  axios.post('/api/plan-market/expends/export',{merchant_ids:[id],tika:1})
                    .then(response => {
                      if(response.data.msg.code == 0){
                        that.$message.success("生成数据已提交申请，请到佣金支出确认中查看详情。");
                        that.loading = true
                        that.getlist()
                      }else{
                        that.$message.error(response.data.msg.info);
                      }
                    })
                }).catch(action => {
                  if(action === 'cancel'){
                    axios.post('/api/plan-market/expends/export',{merchant_ids:[id]})
                      .then(response => {
                        if(response.data.msg.code == 0){
                          that.$message.success("生成数据已提交申请，请到佣金支出确认中查看详情。");
                          that.loading = true
                          that.getlist()
                        }else{
                          that.$message.error(response.data.msg.info);
                        }
                      })
                  }
                });
              }

            },

            //生成支出
            shengchengzhichu:function(){
                var that = this
                this.$confirm('是否自动扣除提卡费?', '提示', {
                  confirmButtonText: '扣除',
                  cancelButtonText: '不扣除',
                  type: 'warning',
                  closeOnClickModal:false,
                  distinguishCancelAndClose: true,
                }).then(() => {
                  axios.post('/api/plan-market/expends/export',{merchant_ids:this.danxuans,tika:1})
                      .then(response => {
                          if(response.data.msg.code == 0){
                              that.$message.success("生成数据已提交申请，请到佣金支出确认中查看详情。");
                              that.loading = true
                              that.getlist()
                          }else{
                              that.$message.error(response.data.msg.info);
                          }
                      })
                }).catch(action => {
                    if(action === 'cancel'){
                      axios.post('/api/plan-market/expends/export',{merchant_ids:this.danxuans})
                          .then(response => {
                              if(response.data.msg.code == 0){
                                  that.$message.success("生成数据已提交申请，请到佣金支出确认中查看详情。");
                                  that.loading = true
                                  that.getlist()
                              }else{
                                  that.$message.error(response.data.msg.info);
                              }
                          })
                    }
                });
            },

            search:function(){
                this.loading = true
                this.getlist()
            },

            //获取列表
            getlist:function(){
                var that = this
                if(this.monthsearch == null){
                    this.monthsearch = ''
                }
                axios.get('/api/plan-market/expend/logs?merchant_name='+this.name+'&start='+this.update_start+'&end='+this.update_end+'&status=-1&page_size=10000')
                	.then(response => {
                		if(response.data.msg.code == 0){
                      that.list = response.data.data.data
                      that.total = response.data.data.total
                      that.loading = false
                      that.ids()
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },

        }
    }
</script>

<style lang="scss" scoped>
    .index{
        .listupload{ font-size: 14px;
            .li{flex: 1; line-height: 38px; margin-top: 20px;}

        }
        .moneyf{
          .el-button--primary{ background: #409EFF; color: #ffffff; border: none; }
          .el-button{ height: 36px !important;}
          .el-date-editor.el-input, .el-date-editor.el-input__inner{ width: auto;}
        }
        .form{ display: flex;
          input{ width: 150px !important;}
        }
        .listth{ font-size: 14px;  border-bottom: 1px #EAEAEA solid; font-weight: bold;}
        .daowei{ margin-bottom: 20px;}
        .daowei2{ color: #DD2727; margin-left: 10px;}
        .moneylist{ display: flex;}
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}


            .powertop{ display: flex; background:#f9f9f9; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #F9F9F9 solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{
                    .flex{ display: flex; margin-bottom: 20px;}
                    .gong{ margin-right: 30px; color: #333;}
                }
                .conright{
                    .el-input__inner{ line-height: 40px !important; height: 40px !important;}
                }
            }
            .conlist{ padding-bottom: 20px; padding-top: 30px; background: #FFFFFF; min-height: 800px;
                .tktiao{ margin-bottom: 20px;
                  .tkli{ flex: 1; text-align: center;  background: url(../../../static/img/changhui.png) no-repeat; line-height: 38px; cursor:pointer;}
                  .tkact{ background: url(../../../static/img/changhong.png) no-repeat; color:#FFFFFF;}
                }
                .flex{ display: flex; justify-content: space-between}
                .gong{ display: flex; padding: 0 20px;
                .el-button{ height: 36px !important;}
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                    .el-button--primary{ padding: 9px 30px;  background: #EEF7FF; border: 1px #EEF7FF solid; }
                    .el-date-editor--month{ margin-right: 20px;}
                    button{  padding: 10px 20px;}
                }
                .gl{ margin-bottom: 20px;
                    .el-input__inner{ width: 200px !important; }
                    .el-button--danger{ margin-left: 0px !important; margin-right: 20px;}
                    .el-input__icon{ line-height: 36px;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px; }
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 5px 5px; height: 40px; font-size: 14px; line-height: 40px; overflow:
                    hidden;white-space: nowrap;text-overflow: ellipsis;}
                    .td:nth-child(1){ flex: 0.5;}
                    .th:nth-child(1){ flex: 0.5;}
                    .td2{ flex: 1.5; display: flex; justify-content: center; flex-wrap: wrap;}
                }
                .el-pagination{ text-align: right; margin: 20px 0}
            }

    }
</style>
